<template>
  <div>
    <div ref="echats1" style="width: 500px; height: 500px;"></div>
  </div>
</template>

<script>
// 引入echarts包
import * as echarts from 'echarts'
export default {
  // 页面加载完成,自动执行,调用函数
  mounted () {
    this.showCharts()
  },
  // vme
  methods: {
    showCharts () {
      // 初始化echarts,到div 元素中
      const myChart = echarts.init(this.$refs.echats1)
      const option = {
        title: {
          text: '堆叠折线图'
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            data: [10, 11, 13, 12, 9],
            // 标点
            markPoint: {
              data: [
                // 最大值 标记
                { type: 'max', name: 'Max' },
                // 最小值标记
                { type: 'min', name: 'Min' }
              ]
            },
            // 标线
            markLine: {
              data: [{
                name: '平均线',
                // 支持 'average', 'min', 'max'
                type: 'average'
              },
              // 直接设置 yAxis 的值 的线
              {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 10
              },
              // 设置最大值 到 最小值 的线
              [
                {
                  // 起点和终点的项会共用一个 name
                  name: '最小值到最大值',
                  type: 'min'
                },
                {
                  type: 'max'
                }
              ],
              // 设置两个坐标之间的线
              [
                {
                  name: '两个坐标之间的标线',
                  coord: ['A', 12]
                },
                {
                  coord: ['B', 9]
                }
              ]]
            }
          },
        ]
      };
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped></style>
